<template>
    <div class="cart_container">
        <!-- 头部标题栏 -->
        <div class="cart_header_container">
            <div>编辑</div>
            <div class="cart_header_title">购物车</div>
            <div> </div>
        </div>
        <!-- 渲染的购物车数据 -->
        <div class="cart_content_container">
            <div class="cart_item_container" 
            v-for="(item,index) in cartItems" :key="index">
                <div class="cart_item_wrapper">
                    <div class="item_checked_container">
                        <input type="checkbox" 
                        @change="OnChecked(item.basicInfo)"
                        :checked="item.checked">
                    </div>
                    <div class="item_img_contianer">
                        <img :src="item.basicInfo.pic" alt="">
                    </div>
                    <div class="item_message_container">
                        <div class="item_message_title" v-html="item.basicInfo.name"></div>
                        <div class=""></div>
                        <div class="item_message_price">￥{{item.basicInfo.minPrice}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="none_container"></div>
        <!-- 下面全选总价计算栏 -->
        <div class="bottom_line_container">
            <div class="bottom_checked">
                <input type="checkbox" :checked="allChecked"
                @change="changeAllChecked()">全选
            </div>
            <div class="total_price_container">
                <span>总价：￥{{totalPrice}}</span>
                <button>结算</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    computed:{
        cartItems(){
            return this.$store.state.cartItems
        },
        allChecked:function(){
            return this.$store.state.allChecked
        },
        totalPrice(){
            var tempPrice = 0
            this.cartItems.forEach(element => {
                if(element.checked){
                    tempPrice += element.basicInfo.minBuyNumber * element.basicInfo.minPrice
                }
            });
            return tempPrice
        }
    },
    methods:{
         OnChecked(item){
            var checked = event.target.checked
            this.$store.dispatch("changeChecked",{
                checked:checked,
                id:item.id
            })
        },
        changeAllChecked(){
            var checked = event.target.checked;
            this.$store.dispatch("changeAllselect",checked)
        }
    },
    mounted(){
        // console.log(this.$store.state.cartItems)
    }
}
</script>

<style scoped>
    .cart_header_container {
        width: 100%;
        height: 1.2rem;
        border-bottom: 0.02rem solid gray;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
    }
    .cart_header_container div {
        width: 15%;
        color: red;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 0.25rem;
    }
    .cart_header_container .cart_header_title {
        font-size: 0.32rem;
        color: #000;
    }
    .cart_content_container {
        width: 100%;
    }
    .cart_item_container {
        width: 100%;
        height: 2.2rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .cart_item_wrapper {
        width: 96%;
        height: 1.9rem;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
    }
    .item_img_contianer {
        border-radius: 0.3rem;
        overflow: hidden;
        margin: 0rem 0.3rem;
    }
    .item_img_contianer img {
        width: 1.9rem;
        height: 1.9rem;
    }
    .item_message_container div {
        height: 0.6rem;
    }
    .item_message_price {
        color: red;
    }
    .bottom_line_container {
      width: 100%;
      height: 54px;
      position: fixed;
      left: 0;
      bottom: 54px;
      border-top: 0.02rem solid gray;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;

    }
    .none_container {
      width: 100%;
      height: 100px;
    }
    .bottom_checked {
        width: 20%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .total_price_container {
        width: 60%;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
    }
    .total_price_container span {
        color: red;
    }
    .total_price_container button {
        width: 50%;
        height: 55px;
        background-color: red;
        color: #fff;
        border: 0px;
    }
</style>